<template>
  <a-form class="port-form">
    <!-- 健康检查 -->
    <div class="health-root">
      <a-form
        ref="formRef"
        :model="formData"
      >
        <a-form-item label="探测类型 :">
          <a-radio-group v-model:value="formData.type" @change="typeChange">
            <a-radio value="ready">就绪检测</a-radio>
            <a-radio value="live">存活检测</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="开始时间(s) :"
          name = "initialDelaySeconds"
          :rules="[{ required: true, message: '请输入开始时间' }]">
          <a-input-number
            v-model:value="formData.initialDelaySeconds"
            spellcheck="false"
          />
        </a-form-item>
        <a-form-item label="探测频率(s) :"
          name = "periodSeconds"
          :rules="[{ required: true, message: '请输入探测频率' }]">
          <a-input-number
            v-model:value="formData.periodSeconds"
            spellcheck="false"
          />
        </a-form-item>
        <a-form-item label="超时时间(s) :"
          name = "timeoutSeconds"
          :rules="[{ required: true, message: '请输入超时时间' }]">
          <a-input-number
            v-model:value="formData.timeoutSeconds"
            spellcheck="false"
          />
        </a-form-item>
        <a-form-item label="失败次数 :"
          name = "failureThreshold"
          :rules="[{ required: true, message: '请输入失败次数' }]">
          <a-input-number
            v-model:value="formData.failureThreshold"
            spellcheck="false"
          />
        </a-form-item>
        <a-form-item
          label = "探测方式 :"
          name = "probeMode"
          :rules="[{ required: true, message: '请选择探测方式' }]"
        >
          <a-radio-group v-model:value="formData.probeMode" @change="probeModeChange">
            <a-radio value="http">http请求</a-radio>
            <a-radio value="tcp">tcp连接</a-radio>
            <a-radio value="exec">执行命令</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <a-form
        ref="paramFormRef"
        :model="probeParam">
        <a-form-item label="端口 :"
          v-if="formData.probeMode ==='http' || formData.probeMode ==='tcp'"
          name = "port"
          :rules="[{ required: true, message: '请输入端口' }]">
          <a-input-number
            v-model:value="probeParam.port"
            spellcheck="false"
          />
        </a-form-item>
        <a-form-item label="请求地址 :"
          v-if="formData.probeMode ==='http'"
          name = "path"
          :rules="[{ required: true, message: '请输入请求地址' }]">
          <a-input
            placeholder="/healthz"
            v-model:value="probeParam.path"
            spellcheck="false"
          />
        </a-form-item>
        <a-form-item label="执行命令 :"
          v-if="formData.probeMode ==='exec'"
          name = "command"
          :rules="[{ required: true, message: '请输入执行命令' }]">
          <a-input-number
            v-model:value="probeParam.command"
            spellcheck="false"
          />
        </a-form-item>
      </a-form>
      <div>
        <a-button type="primary" @click="save" style="margin-right:5px">保存</a-button>
        <a-popconfirm
          v-if="delVisable"
          title="确认删除当前健康检查?"
          ok-text="是"
          cancel-text="否"
          @confirm="del"
        >
          <template #icon><question-circle-outlined style="color: red" /></template>
          <a-button type="primary">删除</a-button>
        </a-popconfirm>
      </div>
    </div>
  </a-form>
</template>



<script lang="ts">
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { defineComponent, reactive, toRefs, ref } from "vue";
import { message, FormInstance } from "ant-design-vue";
import {
  healthTestApi,
} from "@/api/devcloudApi"

export default defineComponent({
  name: "network",
  components: {
    QuestionCircleOutlined,
  },
  props: {
    moduleId: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    const formRef = ref<FormInstance>();
    const paramFormRef = ref<FormInstance>();
    const { moduleId } = toRefs(props);

    const delVisable = ref(false)

    const formData = ref<any>({
    });
    const moduleHealth = ref<any>({})

    const probeParam = ref<any>({})

    const initParmData = (testData:any) => {
      if(testData){
        if('http' === testData.probeMode){
          probeParam.value = {
            ...testData.httpTest
          }
        }else if('tcp' == testData.probeMode){
          probeParam.value = {
            ...testData.tcpTest
          }
        }else if('exec' == testData.probeMode){
          probeParam.value ={
            ...testData.execTest
          }
        }else{
          probeParam.value ={
          }
        }
      }else{
        probeParam.value ={
        }
      }
    }

    const initFormData = (type:string) => {
      if(type === 'live'){
        if(moduleHealth.value.live){
          formData.value = {
            ...moduleHealth.value.live
          }
          delVisable.value = true
        }else{
          formData.value = {
            type: 'live',
            probeMode: 'http'
          }
          delVisable.value = false
        }
        initParmData(moduleHealth.value.live)
      }else if(type === 'ready'){
        if(moduleHealth.value.ready){
          formData.value = {
            ...moduleHealth.value.ready
          }
          delVisable.value = true
        }else{
          formData.value = {
            type: 'ready',
            probeMode: 'http'
          }
          delVisable.value = false
        }
        initParmData(moduleHealth.value.ready)
      }
    }

    const getData = async () => {
      const res = await healthTestApi.moduleHealthTest(moduleId.value);
      if(res.success){
        moduleHealth.value = res.result
      }
    }

    const del = async () => {
      const res = await healthTestApi.delete(formData.value.id)
        if(res.success){
          await getData()
          initFormData(formData.value.type)
          message.success("删除成功")
        }
      
    }

    const save = async () => {
      try {
        await formRef.value?.validateFields();
        await paramFormRef.value?.validateFields();
        if('http' === formData.value.probeMode){
          formData.value.httpTest = probeParam.value
          formData.value.tcpTest = undefined
          formData.value.execTest = undefined
        }else if('tcp' == formData.value.probeMode){
          formData.value.httpTest = undefined
          formData.value.tcpTest = probeParam.value
          formData.value.execTest = undefined
        }else if('exec' == formData.value.probeMode){
          formData.value.httpTest = undefined
          formData.value.tcpTest = undefined
          formData.value.execTest = probeParam.value
        }
        let isSuccess = false
        if(formData.value.id){
          isSuccess = await update()
        }else{
          formData.value.moduleId = moduleId
          isSuccess = await add()
        }
        if(isSuccess){
          await getData()
          initFormData(formData.value.type)
          message.success("保存成功")
        }
      } catch (error) {
        console.log(error);
      }
    }
    
    const add = async () => {
      const res = await healthTestApi.insert(formData.value)
      if (res.success) {
        return true
      }
      return false
    }

    const update = async () => {
      const res = await healthTestApi.update(formData.value)
      if (res.success) {
        return true
      }
      return false
    }

    const probeModeChange = (e:any) => {
      if(formData.value.type === 'live'){
        if(moduleHealth.value.live?.probeMode === e.target.value){
          initParmData(moduleHealth.value.live)
        }else{
          probeParam.value ={
          }
        }
      }else if(formData.value.type === 'ready'){
        if(moduleHealth.value.ready?.probeMode === e.target.value){
          initParmData(moduleHealth.value.ready)
        }else{
          probeParam.value ={
          }
        }
      }
      paramFormRef.value?.clearValidate();
    }

    const typeChange = (e:any) => {
      initFormData(e.target.value)
      formRef.value?.clearValidate();
      paramFormRef.value?.clearValidate();
    }

    const init = async () => {
      await getData()
      initFormData('ready')
    }
    init()

    return {
      formRef,
      paramFormRef,
      delVisable,
      formData,
      typeChange,
      probeParam,
      probeModeChange,
      save,
      del,
    }
  },
});
</script>

<style lang="less" scoped>
.port-form {
  margin: 20px;
  padding: 40px 40px;
}
:deep(.ant-form-item-label > label) {
  width: 120px;
}
:deep(.ant-form-horizontal .ant-form-item-control) {
  width: 30%;
  flex: none;
}

:deep(.ant-form-item-control-input-content) {
  flex: none;
}

:deep(.ant-form-item-control) {
  flex-grow: none;
}
</style>